<template>
  <div>
    <h1>{{ name }}--{{ score }}</h1>
    <button @click="handleScore">修改分数</button>
    <h1>{{ status }}</h1>
    <input type="text" ref="myInput" />
  </div>
</template>

<script setup lang="ts">
import { reactive, computed, ref, onMounted, inject, Ref } from "vue";

interface StuProps {
  name: string;
  score: number;
}
const props = defineProps<StuProps>(); //泛型约束props

interface StuEmits {
  (e: "change-score", arg: { msg: string; n: number }): void;
}
const emits = defineEmits<StuEmits>(); //泛型约束emits
const handleScore = (ev: Event) => {
  emits("change-score", { msg: "你好", n: 10 });
  console.log(ev.target);
};

// 对reactive进行类型约束
interface Goods {
  name: string;
  price: number;
}
const goods = reactive<Goods>({} as Goods);
goods.name = "商品名称";
goods.price = 999;
console.log(goods);

//对computed进行类型约束
const status = computed<string>(() => {
  return props.score >= 60 ? "及格" : "不及格";
});

// 使用ref属性获取DOM
const myInput = ref<HTMLInputElement>();
onMounted(() => {
  myInput.value?.focus();
});

// 依赖注入
let count = inject<Ref<number>>("count");
console.log("comp2组件", count?.value);
</script>

<style scoped></style>
